<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>09_自定义JS对象</title>
    </head>
    <body>
        <table border="1px">
            <caption>商品表</caption>
            <tr>
                <th>商品标题</th>
                <th>商品价格</th>
                <th>商品库存</th>
            </tr>
        </table>
        <script>
            //定义一个数组，模拟从服务器请求回来的多个商品对象
            let productArr = [
                {title:'小米14',price:8000,num:200},
                {title:'华为mate60',price:5000,num:100},
                {title:'苹果16',price:10000,num:700},
                {title:'魅族22',price:5000,num:500}
            ];
            console.log(productArr);
            let table = document.querySelector('table');
            for(let i=0;i<productArr.length;i++){
                let tr = document.createElement('tr');
                let tTd = document.createElement('td');
                let pTd = document.createElement('td');
                let nTd = document.createElement('td');
                tTd.innerHTML = productArr[i].title;
                pTd.innerHTML = productArr[i].price;
                nTd.innerHTML = productArr[i].num
                tr.append(tTd,pTd,nTd);
                table.append(tr);
            }

        </script>
    </body>
</html>